<template>
  <div>
    <a-card :bordered="false">
      <div slot="title" class="title">
        <div class="title_prefix"></div>
        <div class="title_center">本月流程办理情况</div>
      </div>
      <div class="header-box" style="width: 100%; height: 120px; float: left; margin-top: 0">
        <div class="header-box-item" style="flex-basis: 33%">
          <span class="header-box-item-num">{{ this.titleStatistics.completed }}</span>
          <span class="header-box-item-desc">已完成</span>
        </div>
        <div class="divider-vertical"></div>
        <div class="divider-vertical"></div>
        <div class="header-box-item" style="flex-basis: 33%">
          <span class="header-box-item-num">{{ this.titleStatistics.exection }}</span>
          <span class="header-box-item-desc">执行中</span>
        </div>
        <div class="divider-vertical"></div>
        <div class="divider-vertical"></div>
        <div class="header-box-item" style="flex-basis: 33%">
          <span class="header-box-item-num">{{ this.titleStatistics.termination }}</span>
          <span class="header-box-item-desc">终止</span>
        </div>
      </div>
    </a-card>
    <a-row :gutter="32">
      <a-col v-if="pie && pie.length > 0" span="10">
        <a-card :bordered="false" style="padding: 0px; margin-top: 20px">
          <div class="title">
            <div class="title_prefix"></div>
            <div class="title_center">本月流程办理情况</div>
          </div>
          <eCharts
            v-if="pie && pie.length > 0"
            type="pie"
            title="本月完成占比"
            title_pos="center"
            width="100%"
            legend_top="bottom"
            legend_left="right"
            pie_ring
            :series="pie"
          />
        </a-card>
      </a-col>
      <a-col span="14">
        <a-card :bordered="false" style="padding: 0px; margin-top: 20px">
          <div class="title">
            <div class="title_prefix"></div>
            <div class="title_center">本月申请前十名流程</div>
          </div>
          <eCharts
            v-if="xsideClass && seriesClass.length > 0"
            type="bar"
            title=""
            title_pos="center"
            :xside="xsideClass"
            :series="seriesClass"
            yname_l="申请量"
            xname="名称"
            legend_top="bottom"
            :legendColor="['#A4BEFF', '#2BB6F7', 'red']"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-card :bordered="false" style="padding: 0px; margin-top: 20px">
      <div class="title">
        <div class="title_prefix"></div>
        <div class="title_center">本月每日申请量</div>
      </div>
      <eCharts
        v-if="xside && series.length > 0"
        type="line"
        title=""
        title_pos="center"
        :xside="xside"
        :series="seriesLine"
        yname_l="申请量"
        xname="日期"
        legend_top="bottom"
        :legendColor="['#A4BEFF', '#2BB6F7', 'red']"
      />
    </a-card>
  </div>
</template>

<script>
import eCharts from '@/components/Power/ECharts/ECharts'
import {
  monthProHandling,
  monthTopTenApplicants,
  dailyApplicationVolume,
} from '@/api/worktasks/wt_processStatisticsQuery.js'
export default {
  data() {
    return {
      titleStatistics: {
        completed: 0,
        termination: 0,
        exection: 0,
      },
      xside: [],
      xsideClass: [],
      series: [],
      seriesClass: [],
      seriesLine: [
        {
          name: '申请量',
          value: [],
          type: 'line',
          symbol: 'emptyCircle',
          symbolSize: 8,
          smooth: true,
          itemStyle: {
            normal: {
              color: '#A4BEFF',
              lineStyle: {
                width: 2,
                type: 'dotted',
                color: '#A4BEFF',
              },
            },
          },
        },
      ],

      pie: [],
    }
  },
  created() {
    // 统计本月流程任务的完成情况
    this.getMonthProHandling()
    // 统计当月申请前十名流程
    this.getMonthTopTenApplicants()
    // 本月每日申请量
    this.getDailyApplicationVolume()
  },
  methods: {
    // 本月每日申请量
    getDailyApplicationVolume() {
      this.xside = []
      this.series = []
      this.seriesLine[0].value = []
      dailyApplicationVolume().then((res) => {
        console.log('本月每日申请量', res)
        if (res.code == 0) {
          let item = { name: '申请量', value: [] }
          res.data &&
            res.data.forEach((v) => {
              this.xside.push(v.date)
              this.seriesLine[0].value.push(v.total)
              item.value.push({
                value: v.total,
                itemStyle: {
                  color: '#A4BEFF',
                },
              })
            })
          this.series.push(item)
        }
      })
    },
    // 统计当月申请前十名流程
    getMonthTopTenApplicants() {
      this.xsideClass = []
      this.seriesClass = []
      monthTopTenApplicants().then((res) => {
        console.log('当月申请前十名流程', res)
        if (res.code == 0) {
          let item = { name: '申请量', value: [] }
          res.data &&
            res.data.forEach((v) => {
              this.xsideClass.push(v.name_.length > 8 ? v.name_.substring(0, 8) + '...' : v.name_)
              item.value.push({
                value: v.TOTAL,
                itemStyle: {
                  color: '#A4BEFF',
                },
              })
            })
          this.seriesClass.push(item)
        }
      })
    },
    // 统计本月流程任务的完成情况
    getMonthProHandling() {
      monthProHandling().then((res) => {
        console.log('本月流程任务的完成情况', res)
        if (res.code == 0) {
          let tempPie = []
          res.data &&
            res.data.forEach((v) => {
              if (v.name == '已终止') {
                this.titleStatistics.termination = v.value
                tempPie.push({ name: '已终止', value: v.value, itemStyle: { color: '#F2A34B' } })
              } else if (v.name == '已完成') {
                this.titleStatistics.completed = v.value
                tempPie.push({ name: '已完成', value: v.value, itemStyle: { color: '#2BB6F7' } })
              } else if (v.name == '未完成') {
                this.titleStatistics.exection = v.value
                tempPie.push({ name: '未完成', value: v.value, itemStyle: { color: '#4BECEE' } })
              }
            })
          if (tempPie.length > 0) {
            this.pie = tempPie
          } else {
            this.pie = [
              { name: '已终止', value: 0, itemStyle: { color: '#F2A34B' } },
              { name: '已完成', value: 0, itemStyle: { color: '#2BB6F7' } },
              { name: '未完成', value: 0, itemStyle: { color: '#4BECEE' } },
            ]
          }
        }
      })
    },
  },
  components: {
    eCharts,
  },
}
</script>
<style lang="css" scoped>
.title {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.title_prefix {
  width: 3px;
  height: 17px;
  background-color: #5b79fb;
}
.title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}
.header_box {
  width: 90%;
  height: 5rem;
  /* background: #fbfdff; */
  /* border: .07122917rem solid #daedff; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 1rem;
}
.header-box-item-num {
  font-size: 2rem;
  color: #000;
  font-weight: 600;
}
.header-box-item-desc {
  font-weight: 300;
  color: #6c6a6a;
}
</style>
